Ana içeriğe geç

Vue CLI Nedir?

Vue CLI, Vue.js projeleri için resmi geliştirme aracıdır. Modern web uygulamaları geliştirmek için tam özellikli bir araç seti sunar.

# Vue CLI kurulumu
npm install -g @vue/cli

# Yeni proje oluşturma
vue create my-project

# Proje yapılandırması
vue.config.js:

module.exports = {
  publicPath: '/',
  outputDir: 'dist',
  assetsDir: 'static',
  devServer: {
    port: 8080,
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true
      }
    }
  }
}
ipucu

Vue CLI ile oluşturulan projeler, modern web geliştirme araçlarını ve en iyi uygulamaları içerir.

Temel Özellikler​

  • Proje iskeletini hızlıca oluşturma
  • Sıfır yapılandırma ile geliştirmeye başlama
  • Özelleştirilebilir proje şablonları
  • Plugin sistemi ile genişletilebilirlik
  • Grafiksel kullanıcı arayüzü (GUI)
  • Modern araç seti entegrasyonu

Önemli Nokta: Vue CLI, Vue.js ekosisteminde standart proje yapısı ve geliştirme deneyimi sağlar. — Vue.js Takımı

Komut Satırı Araçları​

  1. vue create: Yeni proje oluşturma
  2. vue serve: Hızlı prototipleme
  3. vue build: Üretim için derleme
  4. vue ui: Grafiksel arayüz
  5. vue add: Plugin ekleme
  6. vue invoke: Plugin yapılandırması
bilgi

Vue CLI 5.x sürümü, Webpack 5 ve diğer modern araçlarla tam uyumluluk sağlar.

Proje Özellikleri​

  • Babel entegrasyonu
  • TypeScript desteği
  • ESLint entegrasyonu
  • PWA desteği
  • Unit Testing araçları
  • E2E Testing araçları
  • CSS Pre-processors
tehlike

Vue CLI 3 ve üzeri sürümler, eski Vue CLI versiyonlarıyla uyumlu değildir.

Vue CLI Plugins​

# Plugin ekleme
vue add vuetify
vue add electron-builder
vue add router
vue add vuex

Özelleştirme Seçenekleri​

  1. Webpack Yapılandırması

    // vue.config.js
    module.exports = {
      chainWebpack: config => {
        // webpack yapılandırması
      },
      configureWebpack: {
        // webpack yapılandırması
      }
    }

  2. Babel/PostCSS Yapılandırması

    // babel.config.js
    module.exports = {
      presets: [
        '@vue/cli-plugin-babel/preset'
      ]
    }

Modern Mode​

Vue CLI, modern tarayıcılar için optimize edilmiş bundle'lar oluşturabilir:

vue build --modern

En İyi Uygulamalar​

  1. Proje Organizasyonu

    • Önerilen dizin yapısını takip etme
    • Modüler component yapısı
    • Tutarlı isimlendirme kuralları

  2. Performans Optimizasyonu

    • Lazy loading kullanımı
    • Code splitting
    • Asset optimizasyonu

  3. Geliştirme Süreci

    • Git hooks kullanımı
    • Linting kuralları
    • Test otomasyonu
bilgi

Vue CLI projelerinde vue inspect komutu ile webpack yapılandırmasını inceleyebilirsiniz.

Vue CLI vs Diğer Araçlar​

  • Create React App ile karşılaştırıldığında daha fazla özelleştirme imkanı
  • Angular CLI ile karşılaştırıldığında daha hafif ve esnek
  • Vite ile modern alternatif (Vue 3 projeleri için önerilen)

Özetle, Vue CLI, Vue.js projelerinin geliştirilmesi için kapsamlı ve modern bir araç setidir. Sıfır yapılandırma ile başlama imkanı, zengin plugin ekosistemi ve güçlü özelleştirme seçenekleriyle, Vue.js geliştirme sürecini önemli ölçüde kolaylaştırır. Özellikle kurumsal projelerde ve büyük ölçekli uygulamalarda tercih edilen bir çözümdür.